<script setup>
import { ref, onMounted,computed } from 'vue'
import myAxios from "../../../../plugins/myAxios.js";
import {ElNotification} from "element-plus";
import data from './static/districts.json'

const value = ref('')
const value2 = ref('')
// 初始化数据
const realProvince = ref([]) // 省级
const realCity = ref([{}]) // 实际的市级
const toolsProvince = ref([])  // 遍历用省级数据
const tableData = ref([])
// 分页数据
const page = ref({
  pageNum: 1,
  pageSize: 12,
  total: 0
})

// 获取子级并给options2赋值
const getChildByOptionName = (name) => {
  console.log(name)
  if (name === ''){
    console.log('没有找到')
    return realCity.value = [{ value: '',label: '请选择'}];
  }
  for (let i = 0; i < toolsProvince.value.length; i++) {
    if (toolsProvince.value[i].label === name) {
      realCity.value = toolsProvince.value[i].children;
      return toolsProvince.value[i].children;
    }
  }
}
// 获取数据
const submitquery = () => {
  const params = {
    province: value.value,
    city: value2.value,
    pageNum : page.value.pageNum ? page.value.pageNum : 1, //默认值
    pageSize : page.value.pageSize ? page.value.pageSize : 8 //默认值
  }
  myAxios.post("/query/getPensionOpenArea", params)
      .then((res) => {
        if (res.data.code === 200) {
          // 成功显示成功
          ElNotification({title: '成功',message: `查询成功`,type: 'success',})
          // 获取数据渲染页面
          tableData.value = res.data.data.records;
          page.value.total = res.data.data.total;
          console.log("tableData",tableData.value)
        } else {
          ElNotification({title: '错误',message: `出现错误`,type: 'error',})
        }
      })
      .catch((error) => {
        ElNotification({title: '警告',message: `没有数据`,type: 'warning',})
      });
}

const reset = () => {
  value.value = '';
  value2.value = '';
  realCity.value = [];
}

const handlePageChange = (val) => {
  page.value.pageNum = val;
  submitquery();
}

onMounted(() => {
  realProvince.value = data
  toolsProvince.value = realProvince.value.options //遍历用的省级
})
</script>

<template>
  <div>
    <!--   居中展示-->
    <h2 class="text-center"> 城乡居民养老保险参保登记开通地区查询 </h2>
<!--    查询条件-->
    <h4>查询条件</h4>
    <div>
      所属行政区划:
      <el-select v-model="value" placeholder="请选择" style="width: 240px;margin: 0 20px" @click="value2 = '';">
        <el-option
          v-for="item in realProvince.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value2" placeholder="请选择" style="width: 240px;margin: 0 20px" @click="getChildByOptionName(value)">
        <el-option
            v-for="item in realCity"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="submitquery()">
        查询
      </el-button>
      <el-button @click="reset(realProvince, realCity);">重置</el-button>
    </div>
<!--    表格数据 -->
    <h4>查询结果</h4>
    <el-table :data="tableData"  style="width: 100%;height: 550px">
      <el-table-column prop="cityCode" label="城市编号" width="300" #default="scope">
        <span>{{scope.row.regionId}}</span>
      </el-table-column>
      <el-table-column prop="regionName" label="行政区域" width="300" #default="scope">
        <span>{{ scope.row.regionName }}</span>
      </el-table-column>
      <el-table-column prop="isOpened" label="运行状态" #default="scope">
        <span >已开通</span>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div class="example-pagination-block">
      <el-pagination
          style="justify-content: center"
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"

          @current-change="handlePageChange"
          @click="console.log(page.total)"
      />
<!--       @click="submitquery()"-->
    </div>
  </div>
</template>

<style scoped>
.text-center {
  text-align: center;

}
h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>
